<template>
  <div>
    <p>{{ person.age }}</p>
    <button @click="sumAge">点我老一岁</button>
    <p>{{ title }}</p>
    <button @click="change">别点我</button>
  </div>
</template>

<script setup lang="ts">
// ref 就是一个组合式API
import { ref, reactive } from 'vue'
// reactive只支持对象、数组复杂数据类型
// ref支持将基础类型的数剧转化为响应式数据类型，也可以让复杂的数据变成响应式的数据
// ref（初始值） ->返回一个响应式对象,对象有个属性是value，存储初始值
const title = ref('你好啊')
const change = () => {
  title.value += ' !'
}
const person = reactive({
  name: '张三',
  age: 18
})
const sumAge = () => {
  person.age++
}

const person1 = ref({
  name: '张三',
  age: 18,
  gender: '男'
})
</script>